<template>
  <div class="staff-approval">
    <c-title text="员工审批"></c-title>
    <div class="choose_id">
      <div class="member" :class="{}">
        <span @click="choose_member(1)" v-if="apply" :class="{'current':member_index==1}">申请者</span>
        <span @click="choose_member(2)" v-if="audit" :class="{'current':member_index==2}">审批者</span>
        <span @click="choose_member(3)" v-if="admin" :class="{'current':member_index==3}">管理者</span>
      </div>
    </div>
    <van-tabs v-model="active" @click="choose_handle">
      <van-tab title="全部" name="3"></van-tab>
      <van-tab title="待确认" :name="0"></van-tab>
      <van-tab title="待审核" :name="1"></van-tab>
      <van-tab title="审核通过" :name="2"></van-tab>
      <van-tab title="审核驳回" :name="-1"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="box">
          <div class="head">
            <div class="fz26 c-999">{{item.created_at}}</div>
            <div
              class="status"
              :class="{ 'status-disable':item.status == -1 ,'status-pass':item.status==2,'status-wait':item.status==1,'status-confirm':item.status==0}"
            >
              <img
                v-if="item.status == 0"
                src="../../../assets/images/staff_approval/confirm.png"
                alt
              />
              <img v-if="item.status == 1" src="../../../assets/images/staff_approval/wait.png" alt />
              <img v-if="item.status == 2" src="../../../assets/images/staff_approval/pass.png" alt />
              <img
                v-if="item.status == -1"
                src="../../../assets/images/staff_approval/disable.png"
                alt
              />
              <span>{{item.audit_status_str}}</span>
            </div>
          </div>
          <div class="content">
            <div class="flex mb-24" v-if="member_index!==1">
              <span class="c-999">提交人：</span>
              <div class="flex align-center">
                <img
                  v-if="item.has_one_member&&item.has_one_member.avatar_image"
                  :src="item.has_one_member.avatar_image"
                  style="margin-right: 0.25rem; border-radius: 100px; width: 1.375rem; height: 1.375rem;"
                  alt
                />
                <span
                  v-if="item.has_one_member&&item.has_one_member.username"
                >{{item.has_one_member.username}}</span>
              </div>
            </div>
            <div class="flex mb-24">
              <span class="c-999">申请时间：</span>
              <span>{{item.apply_time_ymd_str}}</span>
            </div>
            <div class="flex mb-24">
              <span class="c-999">申请人：</span>
              <span>{{item.apply_name}}</span>
            </div>
            <div class="flex mb-24">
              <span class="c-999">所在部门：</span>
              <span>{{item.department_name}}</span>
            </div>
            <div class="flex mb-24">
              <span class="c-999">奖励{{integral}}：</span>
              <span>{{item.reward_point}}</span>
            </div>
            <div class="content-wrapper">
              <p class="content-more" :class="{'showMoreClass':showMoreClass}">
                <span class="c-999">事由：</span>
                <span class="icon-1" @click="showMore" v-if="item.showMore">
                  {{!showMoreClass?'更多':"收起"}}
                  <van-icon v-if="showMoreClass" name="arrow-up" />
                  <van-icon name="arrow-down" v-if="!showMoreClass" />
                </span>
                <span ref="reason">{{item.reason}}</span>
              </p>
            </div>
            <div class="flex mb-24 align-center edit" v-if="member_index==3">
              <span class="c-999">审批者：</span>
              <span class="flex align-center">
                <span>{{item.has_one_audit_staff &&item.has_one_audit_staff.name}}</span>
                <img
                  v-if="item.can_edit_reviewedby"
                  @click="show_edit(item.id)"
                  src="../../../assets/images/staff_approval/edit.png"
                  alt
                />
              </span>
            </div>
          </div>
        </div>
        <div class="operation" v-if="member_index!==1 && item.can_audit ">
          <div
            class="flex align-center"
            @click="dialog_handle('cancel',item.id)"
          >
            <img src="../../../assets/images/staff_approval/cancel.png" alt />
            <span>驳回</span>
          </div>
          <div v-if=" item.can_audit" class="operation-line"></div>
          <div
            class="flex align-center"
            @click="dialog_handle('pass',item.id)"
          >
            <img src="../../../assets/images/staff_approval/check_pass.png" alt />
            <span>通过</span>
          </div>
        </div>
      </div>
    </div>

    <router-link
      :to="fun.getUrl('StaffApplyFor')"
      tag="div"
      class="apply_for"
      :class="{'w375': fun.isPc()}"
      v-if="apply && member_index==1"
    >
      <van-button color="#E32323" block round>申请提交</van-button>
    </router-link>

    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-icon name="cross" @click="show=false" />
          <p style="font-size: 1.125rem; margin: 1.25rem auto 0.75rem;">修改审批人</p>
          <div style="  padding: 0 1.75rem;">
            <input
              type="text"
              v-model="member_id"
              :class="{'mb-56':!member_id}"
              placeholder="请输入会员ID"
            />
            <p class="nick-name" v-if="nick_name">昵称：{{nick_name}}</p>
            <p v-if="member_id && nick_name =='' " class="nick-name" style="color: #e32323;">未找到改会员</p>
          </div>
          <div class="popup-btn">
            <span class="c-999" @click="show = false">取消</span>
            <span class="c-E32323" @click="confirm_member">确定</span>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
import { Dialog } from "vant";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      id: "",
      staff_id: "",
      nick_name: "",
      current_page: 1,
      last_page: 1,
      isLoadMore: false,
      active: 3,
      list: [],
      showMoreClass: false,
      show: false,
      integral: window.localStorage.getItem("integral") || "积分",
      member_id: "",
      timer: null,
      member_index: 1,
      apply: false, //申请人按钮
      audit: false, //审核人按钮
      admin: false //管理员按钮
    };
  },
  computed: {
    json() {
      let obj = {
        staff_identity: this.member_index
      };
      if (this.active !== 3) {
        obj.audit_status = this.active;
      }
      if (this.active == 3) {
        delete obj.audit_status;
      }
      return obj;
    }
  },
  watch: {
    member_id(val) {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.debounce(this.getMember(val));
      }, 500);
    }
  },
  async activated() {
    this.isLoadMore = false;
    this.active = '';
    await this.getData({ page: 1 });
  },
  methods: {
    show_edit(id) {
      this.show = true;
      this.id = id;
    },
    confirm_member() {
      $http.post("plugin.staff-audit.frontend.audit.editReviewedby", { staff_id: this.staff_id, id: this.id }).then(res => {
        if (res.result) {
          this.$toast(res.msg);
          this.show = false;
          this.getData({ ...this.json, page: 1 });
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getMember(member_id) {
      $http.post("plugin.staff-audit.frontend.audit.searchLeader", { member_id }).then(res => {
        if (res.result) {
          this.nick_name = res.data.name;
          this.staff_id = res.data.staff_id;
        }
      });
    },
    choose_handle() {
      this.getData(this.json);
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      $http.post("plugin.staff-audit.frontend.audit.index", { page, ...this.json }).then(res => {
        if (res.result == 1) {
          this.current_page = res.data.list.current_page;
          this.last_page = res.data.list.last_page;
          this.list = this.list.concat(res.data.list.data);
        } else {
          this.$toast(res.msg);
        }
        this.isLoadMore = true;
      });
    },
    getData(json) {
      $http.post("plugin.staff-audit.frontend.audit.index", json).then(res => {
        if (res.result == 1) {
          this.apply = res.data.button_arr.apply;
          this.audit = res.data.button_arr.audit;
          this.admin = res.data.button_arr.admin;

          this.current_page = res.data.list.current_page;
          this.last_page = res.data.list.last_page;
          res.data.list.data.forEach(item => {
            item.showMore = false;
          });
          this.list = res.data.list.data || [];

          this.$nextTick(() => {
            let nodes = this.$refs["reason"];
            nodes.forEach((item, index) => {
              if (item.offsetHeight >= 65) {
                this.list[index].showMore = true;
              } else {
                this.list[index].showMore = false;
              }
            });
          });
          console.log(this.list);
        } else {
          this.$toast(res.msg);
        }
      });
    },
    choose_member(i) {
      this.member_index = i;
      this.getData(this.json);
    },
    showMore() {
      this.showMoreClass = !this.showMoreClass;
    },
    dialog_handle(type, id) {
      let text = "";
      let audit_status = "";
      if (type == "pass") {
        text = "是否确认通过申请？";
        audit_status = 1;
      } else {
        text = "是否驳回通过申请？";
        audit_status = 0;
      }
      Dialog.confirm({
        title: "提示",
        message: text
      })
        .then(() => {
          $http.post("plugin.staff-audit.frontend.audit.auditAction", { id, audit_status, staff_identity: this.member_index }).then(res => {
            if (res.result) {
              this.$toast(res.msg);
              this.getData({ ...this.json, page: 1 });
            } else {
              this.$toast(res.msg);
            }
          });
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>  

<style lang='scss' scoped>
.w375 {
  width: 375px;
  left: 50% !important;
  transform: translateX(-50%);
}

.staff-approval {
  .choose_id {
    padding: 0.4688rem;
    background: #fff;
  }

  .apply_for {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
  }

  .current {
    color: #fff !important;
    background: #e32323 !important;
    border-radius: 100px;
  }

  .member {
    display: inline-block;
    margin: 0 auto;
    height: 1.75rem;
    border-radius: 1rem;
    background: #f5f5f5;
    color: #e32323;
    overflow: hidden;

    span {
      display: inline-block;
      width: 6.1563rem;
      height: 100%;
      line-height: 1.75rem;
    }
  }

  input {
    border: 1px solid #e7e7e7;
    border-radius: 0.125rem;
    padding: 0.5rem;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .mb-56 {
    margin-bottom: 1.75rem;
  }

  .nick-name {
    text-align: left;
    font-size: 0.75rem;
    margin-top: 0.375rem;
    margin-bottom: 0.75rem;
    position: absolute;
    bottom: 25%;
  }

  .popup-btn {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #e7e7e7;
    margin-top: 0.75rem;

    &::after {
      position: absolute;
      content: "";
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      height: 100%;
      background: #e7e7e7;
    }
  }

  .c-E32323 {
    color: #e32323;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      position: relative;
      width: 17.5rem;
      height: 10.9375rem;
      border-radius: 0.25rem;
      background: #fff;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .van-icon {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
    }
  }

  .list {
    padding: 0.5rem 0.75rem 5rem;
  }

  .align-center {
    align-items: center;
  }

  .c-999 {
    color: #999;
  }

  .content {
    padding: 0.75rem 0 0;
  }

  .showMoreClass {
    -webkit-line-clamp: 30 !important;
  }

  .edit {
    img {
      width: 1rem;
      height: 1rem;
      margin-left: 0.25rem;
    }
  }

  .operation {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #e7e7e7;
    padding: 0.875rem 0;
    position: relative;

    .operation-line {
      position: absolute;
      height: 100%;
      width: 1px;
      background: #e7e7e7;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
    // &::after {
    //   position: absolute;
    //   content: "";
    //   height: 100%;
    //   width: 1px;
    //   background: #e7e7e7;
    //   left: 50%;
    //   top: 0;
    //   transform: translateX(-50%);
    // }
    img {
      width: 1rem;
      height: 1rem;
      margin-right: 0.25rem;
    }
  }

  .content-wrapper {
    display: flex;
    padding-bottom: 0.75rem;
    text-align: left;

    .content-more {
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    .content-more::before {
      content: "";
      float: right;
      height: calc(100% - 18px);
    }

    .icon-1 {
      width: 50px;
      float: right;
      clear: both;
      color: #e32323;
    }
  }

  .flex {
    display: flex;
  }

  img {
    margin: 0;
    width: 1.375rem;
    height: 1.375rem;
  }

  .box {
    padding: 0.75rem 0.75rem 0;
  }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 0.75rem;
  }

  .fz26 {
    font-size: 0.8125rem;
  }

  .mb-24 {
    padding-bottom: 0.75rem;
  }

  .status {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;

    img {
      width: 1rem;
      height: 1rem;
      margin-right: 0.125rem;
    }
  }

  .status-wait {
    background: rgba(246, 172, 74, 0.1);
    color: #f6ac4a;
  }

  .status-disable {
    background: rgba(227, 35, 35, 0.1);
    color: #e32323;
  }

  .status-pass {
    background: rgba(52, 174, 89, 0.1);
    color: #34ae59;
  }

  .status-confirm {
    background: rgba(227, 35, 35, 0.1);
    color: #e32323;
  }

  .item {
    margin-bottom: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
  }

  .line {
    width: 100%;
    background: #e7e7e7;
    height: 1px;
  }
}
</style>